import React, { useEffect, useState } from 'react'
import { Button, Checkbox, Form, Input, message, Modal } from 'antd'
import { useAppDispatch, useAppSelector } from '@/store'
import { postAddAdmin } from '@/util/request'
import { get_show_data, setShow } from '@/store/slice/admin_manage'
import { get_admin_list_async } from '@/store/slice/user'

// 学生权限的modal框
export default function SManageModal () {
  const dispatch = useAppDispatch()
  const showing = useAppSelector(get_show_data)
  const [form] = Form.useForm();

  // 点击取消按钮
  const handleCancel = () => {
    dispatch(setShow(false))
    form.resetFields() 
  }

  // 点击新增按钮
  async function onFinish ({ phone }: { phone: string }) {
    const res: any = await postAddAdmin(phone)
    if (res.status === 201) {
      message.success('新增成功')
      dispatch(setShow(false))
        dispatch(get_admin_list_async({
          pageNo : 1,
          pageSize : 10
        }))
        form.resetFields() 
    }
  }
  return (
    <div>
      <Modal  title="新增管理员" open={showing} destroyOnClose onCancel={handleCancel} okButtonProps={{ autoFocus: true, htmlType: 'submit' }}
      modalRender={(dom) => (
        <Form
          layout="vertical"
          form={form}
          initialValues={{ modifier: 'public' }}
          onFinish={(values) => onFinish(values)}
        >
          {dom}
        </Form>
      )}
      > 
          <Form.Item
            label="手机号"
            name="phone"
            rules={[
              { required: true, message: '请输入手机号!' },
              { pattern: new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/, 'g'), message: '请输入正确的手机号' }
            ]}
          >
            <Input />
          </Form.Item>
      </Modal>
    </div>
  )
}
